import { useState } from 'react'
import {
  Form,
  Input,
  Button,
  Dialog,
  Toast,
  Modal,
  Image,
  NavBar
} from 'antd-mobile'
import axios from './api/axios'
import './App.css'

function App() {
  const [count, setCount] = useState(0)
  const [visible, setVisible] = useState(false)
  const img='./assets/sfz.png'
  const demoSrc =
  'https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=60'
 const [form] = Form.useForm()
const handelImg=()=>{
let fileInput=document.createElement('input')
fileInput.type='file'
fileInput.click()
fileInput.onchange=async()=>{
  let file =fileInput.files[0]
  let Filedata=new FormData
  Filedata.append('file',file)
const res= await axios.post('/api/orc/upload/image',Filedata)
console.log(res);
const {code,message,data}=res.data
if(code==200){
  Toast.show(message)
  form.setFieldsValue(data)
}else{
  Toast.show(message)
  form.resetFields()
}

}
}
  return (
    <div>
       <NavBar style={{backgroundColor:'skyblue'}}>添加乘车人</NavBar>
      <Button
      block
        onClick={() => {
          setVisible(true)
        }}
      >
        显示身份证
      </Button>
        <Modal
        visible={visible}
        content={
           <Image src={demoSrc} />
        }
        closeOnAction
        onClose={() => {
          setVisible(false)
        }}
        actions={[
          {
            key: 'confirm',
            text: '我知道了',
          },
        ]}
      />

      <Form
      form={form}
        layout='horizontal'
        footer={
          <Button block type='submit' color='primary' size='large'>
            提交
          </Button>
        }
      >
        <Form.Header>添加</Form.Header>
        <Form.Item style={{textAlign:'center'}}>
          <Button block onClick={()=>handelImg()}>扫描证件添加</Button>
        </Form.Item>
        <Form.Item
          name='title'
          label='乘客类型'
          rules={[{ required: true, message: '乘客类型不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入乘客类型' />
        </Form.Item>
         <Form.Item
          name='name'
          label='姓名'
          rules={[{ required: true, message: '姓名不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入姓名' />
        </Form.Item>
    
         <Form.Item
          name='code'
          label='身份证'
          rules={[{ required: true, message: '身份证不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入身份证' />
        </Form.Item>
        
         <Form.Item
          name='auth'
          label='组件类型'
          rules={[{ required: true, message: '组件类型不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入组件类型' />
        </Form.Item>

      
         <Form.Item
          name='phone'
          label='手机号码'
          rules={[{ required: true, message: '手机号码不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入手机号码' />
        </Form.Item>

      </Form>

    </div>
  )
}

export default App
